<!--
 * @Description:
 * @Author: peng.zhang
 * @Date: 2023-05-14 20:09:19
 * @LastEditors: peng.zhang
 * @LastEditTime: 2023-05-24 21:50:22
-->
<template>
    <div class="common-uploader-area">
      <el-upload
        action="#"
        class="common-uploader"
        :http-request="upload"
        :show-file-list="false"
        :style="{width: width, height: height}"
        :disabled="uploadDone || isUploading"
      >
        <el-progress v-if="isUploading" class="upload-circle-progress" type="circle" :percentage="progress" />
        <i class="common-uploader-icon" :class="{'el-icon-plus': !uploadDone, 'el-icon-check': uploadDone}" :style="{visibility: isUploading ? 'hidden' : 'initial', height: height, lineHeight: height}" />
      </el-upload>
      <!-- 分片进度条 -->
      <!-- <div v-for="progress in activeProgressList" class="progress-area">
        <div class="progress-index">{{ progress.index }}.</div>
        <el-progress  :percentage="index"></el-progress>
      </div> -->
      </div>
  </template>

  <script>
  import axios from 'axios';
  export default {
    name: 'CommonUpload',
    components: {},
    mixins: [],
    props: {
      width: {
        type: String,
        default: '640px'
      },
      height: {
        type: String,
        default: '270px'
      },
      url: {
        type: String,
        required: true
      },
      /**
       * image file pdf
       */
      type: {
        type: String,
        default: 'file'
      }
    },
    data() {
      return {
        isUploading: false,
        uploadDone: false,
        progress: 0
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    updated() {},
    activated() {},
    deactivated() {},
    beforeDestroy() {},
    destroyed() {},
    methods: {
      upload(e) {
        let { file } = e;
        console.log(file);
        const formData = new FormData();
        // formData.append('test', 'zzzz');
        // formData.append('file', file);
        /**
         * video 对应 file
         * pdf   对应 pdf
         * image 对应 image
         */
        formData.append(this.type === 'video' ? 'file' : this.type, file);

        console.log(formData);
        var self = this;
        axios({
          // baseURL: 'http://localhost:80',
          // url: "/dev-api/resource/video/1",
          url: this.url,
          method: 'post',
          timeout: 10 * 60 * 1000,
          headers: {
            // Authorization: 'zzzp',
            "Content-Type": 'multipart/form-data'
          },
          data: formData,
          onUploadProgress: function(progressEvent) {
            try {
              if (progressEvent.lengthComputable) {
                self.isUploading = true;
                // 实时获取上传进度 注意如果进度条不动了一般是axios超市了
                const uploadProgress = Math.floor(progressEvent.loaded / progressEvent.total * 100 | 0);
                console.log('进度: ', uploadProgress);
                if (uploadProgress >= 100) {
                  self.isUploading = false;
                  // 设置上传完毕
                  self.uploadDone = true;
                }
                self.progress = uploadProgress;
              }
            } catch (error) {
              self.isUploading = false;
            }
          }
        }).then(res => {
          const {code} = res.data;
          if (code === 200) {
            self.$message.success('上传成功');
            self.$emit('afterUpload')
          } else {
            self.$message.error('上传失败请重试');
          }
        })
      }
    }
  }
  </script>

  <style lang="scss" scoped>

  .common-uploader-area {
    width: 640px;
    height: 270px;

    .upload-circle-progress {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .common-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 270px;
      line-height: 270px;
      text-align: center;
    }

  </style>
  <style lang="scss">
  .common-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: block !important;

    &:hover {
      border-color: #409EFF;
    }
  }
  </style>
